<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海归页面</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/daohang.css">
    <link rel="stylesheet" href="css/turtle.css">
    <script src="./jquery-3.6.0.js"></script>

</head>

<body>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <!-- 左边浮动 -->
            <div class="left">
                <li class="logo">
                    <a href=""> <span>BOSS直聘</span></a>
                </li>
            </div>

            <div class="center">
                <li id="shouye"><a href="./shouye.html"><span>首页</span></a></li>
                <li id="job"><a href="./job.html"><span>职位</span></a></li>
                <li id="campus"><a href="./campus.html"><span>校园</span></a></li>
                <li id="turtle" ><a href="./turtle.html"><span id="current">海归</span></a></li>
                <li id="company"><a href="./company.html"><span>公司</span></a></li>

                <li id="app"><a href="./APP.html"><span>APP</span></a></li>
                <li id="news"><a href="./zixun.html"><span>资讯</span></a></li>
                <li id="find"><a href=""><span>发现</span></a></li>
        
                <li id="all-in"><a href="./youle.html"><span>有了</span></a></li>
                <li id="baike"><a href="./baike.html"><span>百科</span></a></li>

            </div>
            <div class="right">
                <!-- 右边浮动 -->
                <li><a href=""><span>上传简历</span></a></li>
                <li><a href=""><span>我要找工作</span></a></li>
                <li><a href=""><span>我要招聘</span></a></li>
                <li><a href=""><input type="button" value="注册"></a></li>
                <li><a href=""><input type="submit" value="登录"></a></li>
            </div>
        </ul>
    </nav>

    <!-- 导航栏下面的背景图 -->
    <div class="top-banner">
        <div class="banner-inner">
            <div class="top-slogan">

            </div>
            <div class="slider-wrapper">
                <div class="slider-contanier">
                    <div class="slider-item">
                        <img src="./img/turtle/直职学院网页端-头图-02-3147b7ed8bcd4c1c1d3a633463c0eefd.png" alt="">
                    </div>
                    <div class="slider-page">
                        <span class="cur"></span>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- 设置下面的搜索部分 -->
    <div class="search-box">
        <div class="search-box-all">
            <!-- 上面的找全职  找实习 -->
            <div class="search-form ">
                <span class="shanghai">全国</span>
                <!-- <span class="inp"> -->
                <input type="text" placeholder="搜索职位、公司">
                <!-- </span> -->
                <span class="search-form-search">搜索</span>
            </div>

        </div>
        <div class="hot-job">
            <b>热门职位：</b>
            <span>Java</span>
            <span>教师</span>
            <span>管理培训生</span>
            <span>产品经理</span>
            <span>数据分析师</span>
            <span>电商运营</span>
            <span>web前端</span>
            <span>新媒体运营</span>
            <span>UI设计师</span>
            <span>实习生</span>
        </div>
    </div>
    <!-- 设置核心内容 -->
    <!-- 设置城市图片 -->
    <div class="hot-city">
        <ul>
            <li>
                <img src="https://static.zhipin.com/zhipin-geek/v488/web/geek/images/city_101010100.png" alt="">

            </li>
            <li>
                <img src="https://static.zhipin.com/zhipin-geek/v488/web/geek/images/city_101020100.png" alt="">
            </li>
            <li>
                <img src="https://static.zhipin.com/zhipin-geek/v488/web/geek/images/city_101280600.png" alt="">
            </li>
            <li>
                <img src="https://static.zhipin.com/zhipin-geek/v488/web/geek/images/city_101210100.png" alt="">
            </li>
            <li>
                <img src="https://static.zhipin.com/zhipin-geek/v488/web/geek/images/city_101280100.png" alt="">
            </li>
            <li>
                <img src="https://static.zhipin.com/zhipin-geek/v488/web/geek/images/city_101190100.png" alt="">
            </li>
        </ul>
    </div>

    <!-- 热门岗位-__-全国部分 -->
    <div class="hot-pos-buried   " id="hot-post">
        <div class="box-title">
            <b>热门岗位</b>
            <span>全国</span>
            <span><img src="./img/turtle/city-down-arrow.png" alt=""></span>
        </div>
        <h3 class="pisition-type">
            <span id="cur">全部</span>
            <span>技术</span>
            <span>产品</span>
            <span>设计</span>
            <span>运营</span>
            <span>市场</span>
            <span>人事/财务/行政</span>
            <span>销售</span>
            <span>传媒</span>
            <span>金融</span>
            <span>教育培训</span>
            <span>房地产/建筑</span>
            <span>供应链/物流</span>
            <span>采购/贸易</span>
            <span>资讯/翻译/法律</span>
            <span>旅游</span>
            <span>服务业</span>
            <span>生产制造</span>
            <span>高级管理</span>
        </h3>
        <!-- js 渲染上去的 -->
        <div class="position-list">
            <ul id="first-hotpost">

            </ul>
        </div>
        <!-- 查看更多 -->
        <!-- <p class="common-tab-more job-more">
        </p> -->
        <div class="job-more">
            <a href="./job.html"> 查看更多</a>
        </div>
    </div>

    <!-- 短期实习部分 -->
    <div class="hot-pos-buried   " id="field-trip">
        <div class="box-title">
            <b>短期实习</b>
        </div>
        <h3 class="pisition-type">
            <span id="cur">全部</span>
            <span>技术</span>
            <span>设计</span>
            <span>运营</span>
            <span>市场</span>
            <span>人事/财务/行政</span>
            <span>销售</span>
            <span>金融</span>
            <span>教育培训</span>
            <span>房地产/建筑</span>
            <span>供应链/物流</span>
            <span>采购/贸易</span>
            <span>资讯/翻译/法律</span>
            <span>生产制造</span>
        </h3>
        <!-- js 渲染上去的 -->
        <div class="position-list">
            <ul id="two-position-list">

            </ul>
        </div>
        <!-- 查看更多 -->
        <!-- <p class="common-tab-more job-more">
        </p> -->
        <div class="job-more">
            <a href="./job.html"> 查看更多</a>
        </div>
    </div>

    <!-- 热门公司部分 -->
    <div class="hot-pos-buried   " id="field-trip">
        <div class="box-title">
            <b>热门公司</b>
        </div>
        <h3 class="pisition-type">
            <span id="cur">北京</span>
            <span>上海</span>
            <span>深圳</span>
            <span>杭州</span>
            <span>广州</span>
            <span>成都</span>
            <span>沈阳</span>
            <span>南京</span>
            <span>武汉</span>
            <span>西安</span>
        </h3>
        <!-- js 渲染上去的 -->
        <div class="position-list">
            <ul class="position-list-hotcompany" id="three-hotCompany">
                <li>
                    <div class="sub-li">
                        <!-- li  里上边部分 -->
                        <div class="company-info">
                            <div class="img-box">
                                <img src="https://img.bosszhipin.com/beijin/mcs/bar/20200430/4204e9c9f200b00b77fb59d093acd281be1bd4a3bd2a63f070bdbdada9aad826.jpg"
                                    alt="">
                            </div>
                            <div class="company-text">
                                <h4>腾讯</h4>
                                <span>不需要融资</span>
                                <span class="vline"></span>
                                <span>互联网</span>
                            </div>
                        </div>
                        <!-- li  里下边部分 -->

                        <div class="company-info-bot">
                            <p><span class="text-blue">9736</span>个热招职位</p>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
        <!-- 查看更多 -->
        <!-- <p class="common-tab-more job-more">
        </p> -->
        <div class="job-more">
            <a href="./job.html"> 查看更多</a>
        </div>
    </div>

    <!-- 下面部分的banner   和归国求职必读    热门行业知识-->
    <div class="all">
        <!-- 放banner图 -->
        <div class="center-banner">
        </div>
        <div class="article-container">
            <!-- 放banner  下面的东西 -->
            <div class="tab-container">
                <div class="tab-box">
                    <a href="" class="cur">归国求职必读</a>
                    <a href="">热门行业知识</a>
                </div>
            </div>
            <div class="article-box">
                <div class="list-news" style="display: block;">
                    <ul class="list-news-ul">
                        <li>
                            <div class="img-wrap">
                                <a href="">
                                    <img src="https://img.bosszhipin.com/beijin/article/cover/5d3386f0bb5d35be51c23af10d58df39f2cb50b22bae070ff4c380abdba57991.png"
                                        alt="">
                                </a>
                            </div>
                            <div class="text">
                                <p class="text-title">在美留学生找工作，这些小技巧帮你解决99%的烦恼</p>
                                <p class="summary">
                                    求职从来都不是一件容易的事情，在全球疫情的影响下，国内外经济都在紧缩，想要顺利通过层层笔试、面试，找到一个合适、满意的工作更是难上加难。对于在美国学习生活的留学生来说，无论是商科、计算机这类热
                                </p>
                                <p class="author">
                                    <span>YZD</span>
                                    <em>·</em>
                                    <span class="time">2021-12-15</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="img-wrap">
                                <a href="">
                                    <img src="https://img.bosszhipin.com/beijin/article/cover/5d3386f0bb5d35be51c23af10d58df39f2cb50b22bae070ff4c380abdba57991.png"
                                        alt="">
                                </a>
                            </div>
                            <div class="text">
                                <p class="text-title">在美留学生找工作，这些小技巧帮你解决99%的烦恼</p>
                                <p class="summary">
                                    求职从来都不是一件容易的事情，在全球疫情的影响下，国内外经济都在紧缩，想要顺利通过层层笔试、面试，找到一个合适、满意的工作更是难上加难。对于在美国学习生活的留学生来说，无论是商科、计算机这类热
                                </p>
                                <p class="author">
                                    <span>YZD</span>
                                    <em>·</em>
                                    <span class="time">2021-12-15</span>
                                </p>
                            </div>
                        </li>
                    </ul>
                    <div class="page">
                        <!-- 点击浏览更多   出后面跟着加载3个新的内容 -->
                        <a href="" class="load-more">浏览更多</a>
                    </div>
                </div>
                <!-- 下边隐藏切换页面的时候显示出来 -->
                <div class="list-new" style="display: none;">

                </div>
            </div>
        </div>
    </div>


    <div class="footer">
        <div class="footer-inner">
            <div class="inner-top">
                <ul class="one">
                    <li id="first">企业服务</li>
                    <li>职位搜索</li>
                    <li>新闻资讯</li>
                    <li>BOSS直聘APP</li>
                    <li>投资者关系</li>
                </ul>
                <ul class="one">
                    <li id="first">使用与帮助</li>
                    <li>协议与规则</li>
                    <li>个人信息保护政策</li>
                    <li>防骗指南</li>
                    <li>使用帮助</li>
                </ul>
                <ul class="one">
                    <li id="first">练习BOSS直聘</li>
                    <li>北京华品博睿网络技术有限公司</li>
                    <li>公司地址 北京市朝阳区太阳宫中路16号院1号楼18层1801内09</li>
                    <li>违法和不良信息举报邮箱/未成年人举报渠道 jubao@kanzhun.com</li>
                    
                </ul>
                <ul class="one">
                    <li id="first">
                        <img src="https://static.zhipin.com/v2/web/geek/images/footer-logo.png" alt="">
                    </li>
                    <li>企业服务热线和举报投诉/未成年人举报渠道 </li>
                    <li>公司地址 老年人直连热线</li>
                    <li>工作日  8:00 - 22:00</li>
                    <li>休息日  9:30 - 18:30</li>
                </ul>
            </div>
            <div class="inner-bottom">
                <div class="left">
                    <div class="inner-bottom-left">
                        <span>Copyright © 2022 BOSS直聘</span>
                        <span>京ICP备14013441号-5</span>
                        <span>京ICP证150923号</span>
                        <span>京网文[2020]0399-066 号</span>
                        <span> <img src="	https://static.zhipin.com/v2/web/geek/images/icon-badge-1.png" alt=""> 电子营业执照</span>
                        <span><img src="	https://static.zhipin.com/v2/web/geek/images/icon-beian.png" alt=""> 京公网安备11010502032801</span>
                    </div>
                    <div class="inner-bottom-right">
                        <span>朝阳警力</span>
                        <span>人力资源服务许可证</span>
                        <span>网上有害信息举报专区</span>
                        <span>朝阳区人社局监督电话</span>
                    </div>
                </div>
                <div class="right">
                    <a href="https://www.weibo.com/bosszhipin" target="_blank" class="weibo">
                        <img src="./img/turtle/微博.svg" alt="">
                    </a>
                    <a href="#" class="weixin">
                        <img src="./img/turtle/微信.svg" alt="">
                    </a>
                    <a href="#" class="app">
                        <img src="./img/turtle/app.svg" alt="">
                    </a>
                    <a href="" class="icon-client-app">
                        <img src="https://img.bosszhipin.com/static/file/2021/dppx09luaq1637052502211.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <p>
            <span>友情链接</span>
            <span>看准网</span>
        </p>
    </div>
    <script>
        /*------------------------渲染热门岗位部分----------------------------------------------------*/
        $(window).ready(function () {
            let str = ''

            $.ajax({
                type: 'get',
                url: '/getHotPost',
                dataType: 'json'
            }).done((data) => {

                console.log(data);
                console.log(data.job);
                // data.job 得到的是    json里的 job对象
                // job对象里有个数组      jobList  数组里面是一个个对象
                console.log(data.job.jobList);
                let dataJob = data.job.jobList
                let str = ''
                dataJob.forEach((value, index) => {
                    // value   是数组里的每一个对象   打点取值
                    // console.log(value);
                    // console.log(value.jobName);
                    str += `          
                    <li>
                            <div class="sub-li">
                                <div class="job-info">
                                    <div class="job-info-top">
                                        <span class="job-name">${value.jobName}<img src="./img/turtle/guide-add-download-icon-hover.png"
                                                alt=""></span>
                                        <span class="salary">${value.money}</span>
                                    </div>
                                    <div class="job-info-bot">
                                        <span>${value.city}</span>
                                        <span class="vline"></span>
                                        <span>${value.jobTime}</span>
                                        <span class="vline"></span>
                                        <span>${value.shoolLevel}</span>
                                    </div>
                                </div>
                                <div class="sub-li-bottom">
                                    <div class="img">
                                        <img src="${value.src}"
                                            alt="">
                                    </div>
                                    <div class="company-info">
                                        <span class="name">${value.companyName}</span>
                                        <span class="type">${value.trade}</span>
                                        <span class="vline vline1"></span>
                                        <span class="level">${value.level}</span>
                                    </div>
                                </div>
                            </div>
                    </li>
                    `
                })
                $('#first-hotpost ').html(str)
            }).fail((err) => {
                console.log(err);
            })
        })


        /*-------------------------渲染实习 岗位部分-----------------------------------*/
        $(window).ready(function () {
            let str = ''

            $.ajax({
                type: 'get',
                url: '/getFieldTrip',
                dataType: 'json'
            }).done((data) => {
                let dataJob = data.job.jobList
                let str = ''
                dataJob.forEach((value, index) => {
                    // value   是数组里的每一个对象   打点取值
                    console.log(value);
                    // console.log(value.jobName);
                    str += `          
                    <li>
                            <div class="sub-li">
                                <div class="job-info">
                                    <div class="job-info-top">

                                        <span class="job-name">${value.jobName}<img src="./img/turtle/guide-add-download-icon-hover.png"
                                                alt=""></span>
                                        <span class="salary">${value.money}</span>
                                    </div>
                                    <div class="job-info-bot">
                                        <span>${value.city}</span>
                                        <span class="vline"></span>
                                        <span>${value.jobTime}</span>
                                        <span class="vline"></span>
                                        <span>${value.shoolLevel}</span>
                                    </div>
                                </div>

                                <div class="sub-li-bottom">
                                    <div class="img">
                                        <img src="https://img.bosszhipin.com/beijin/upload/com/logo/20200721/3ab1833f4fe9749bbf8d41b087c8c74125404ffb065b2e1b8a04f9f3410965bb.png"
                                            alt="">
                                    </div>
                                    <div class="company-info">
                                        <span class="name">${value.companyName}</span>
                                        <span class="type">${value.trade}</span>
                                        <span class="vline vline1"></span>
                                        <span class="level">${value.level}</span>
                                    </div>
                                </div>
                            </div>
                    </li>
                    `
                })
                $('#two-position-list').html(str)
            }).fail((err) => {
                console.log(err);
            })
        })

        /*--------------------------------渲染热门公司部分------------------------------------------------*/
        $(window).ready(function () {
            let str = ''

            $.ajax({
                type: 'get',
                url: '/getHotCompany',
                dataType: 'json'
            }).done((data) => {
                let dataJob = data.job.jobList
                let str = ''
                dataJob.forEach((value, index) => {
                    // value   是数组里的每一个对象   打点取值
                    console.log(value);
                    // console.log(value.jobName);
                    str += `          
                    <li>
                    <div class="sub-li">
                        <div class="company-info">
                            <div class="img-box">
                                <img src="${value.src}"
                                    alt="">
                            </div>
                            <div class="company-text">
                                <h4>${value.companyName}</h4>
                                <span>${value.level}</span>
                                <span class="vline"></span>
                                <span>${value.trade}</span>
                            </div>
                        </div>
                        <div class="company-info-bot">
                            <p><span class="text-blue">${value.count}</span>个热招职位</p>
                        </div>
                    </div>
                </li>
                    `
                })
                $('#three-hotCompany').html(str)
            }).fail((err) => {
                console.log(err);
            })
        })
    </script>
</body>

</html>